<!doctype html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>仿京东左侧菜单</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			a {
				text-decoration: none;
			}

			.nav-box {
				width: 210px;
				margin: 5px 0 0 5px;
			}

			.nav-top a {
				display: block;
				height: 45px;
				font-size: 16px;
				line-height: 45px;
				padding: 0 10px;
				background: #B1191A;
				color: #fff;
			}

			ul {
				background: #c81623;
				list-style: none;
				padding-bottom: 1px;
			}

			ul li {
				height: 30px;

				line-height: 30px;
				font-size: 14px;
				color: #fff;
				position: relative;
				padding-left: 5px;
			}

			ul li a {
				color: #fff;
			}

			ul li div {
				display: none;
				position: absolute;
				left: 211px;
				top: 0px;
			}
		</style>
	</head>
	<body>
		<div class="nav-box">
			<div class="nav-top"><a href="">全部商品分类</a></div>
			<ul>
				<li>
					<a href="">家用电器</a>
					<div><img src="img/erji.jpg" /></div>
				</li>
				<li>
					<a href="">手机</a>、<a href="">数码</a>、<a href="">京东通信</a>
					<div><img src="img/erji1.jpg" /></div>
				</li>
				<li>
					<a href="">电脑</a>、<a href="">办公</a>
					<div><img src="img/erji2.jpg" /></div>
				</li>
				<li>
					<a href="">家居</a>、<a href="">家具</a>、<a href="">家装</a>、<a href="">厨具</a>
					<div><img src="img/erji3.jpg" /></div>
				</li>
				<li>
					<a href="">男装</a>、<a href="">女装</a>、<a href="">珠宝</a>
					<div><img src="img/erji4.jpg" /></div>
				</li>
			</ul>
		</div>
		<script src="./js/jq.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				/**一级内容悬浮**/
				$("li").mouseover(function() {
					$(this).css({
						"background": "orange"
					}); //当前li 背景颜色为橙色

					$(this).children("div").show(); //让相应二级内容显示

				}).mouseout(function() {
					$(this).css({
						"background": "#c81623"
					});
					$(this).children("div").hide();

				});
			});
		</script>
	</body>
</html>
